使用流式布局 (Flow Layout) 节点

流式布局 (Flow Layout) 节点可用于按行排列节点。当行空间不够时,流式布局 (Flow Layout) 节点会将其子节点置于新的一行。您可以使用流式布局 (Flow Layout) 节点像在页面上那样排列内容。

流式布局 (Flow Layout) 节点会按您添加子节点时的顺序迭代自己的子节点,并首先沿主要方向 (Primary Direction) 属性中设置的行来排列项。当流式布局 (Flow Layout) 节点用尽主要方向 (Primary Direction) 属性所设置的方向上的可用空间时,它会沿次要方向 (Secondary Direction) 属性中设置的方向创建一个新行。请参阅设置流式布局 (Flow Layout) 节点的方向

您可以设置方向和起点,以便在 x、y 和 z 轴上排列 3D 流式布局 (Flow Layout 3D) 子节点以及在 x 和 y 轴上排列 2D 流式布局 (Flow Layout 2D) 子节点。

创建 流式布局 (Flow Layout) 节点

要创建 流式布局 (Flow Layout) 节点:

  1. 工程 (Project)按下 Alt 并右键点击要在其中创建流式布局 (Flow Layout) 节点的那个节点,然后选择 3D 流式布局 (Flow Layout 3D)2D 流式布局 (Flow Layout 2D)
    请注意,只能在 3D 节点内创建 3D 节点,只能在 2D 节点内创建 2D 节点。
    建议

    预览 (Preview) 中选择2D 流布局工具 (Flow Layout 2D tool) ,在预览 (Preview) 中点击并拖动来创建 2D 流式布局 (Flow Layout 2D) 节点。

    • 创建宽度大于高度的布局时,布局方向为从左向右 (Left to Right)
    • 创建高度大于宽度的布局时,布局方向为从上到下 (Top to Bottom)
  2. 工程 (Project) 中向您在上一步中创建的布局添加子节点。
    例如,如果您创建 3D 流式布局 (Flow Layout 3D) 节点,则添加若干球体 (Sphere) 节点,如果您想创建 2D 流式布局 (Flow Layout 2D) 节点,则添加若干图像 (Image) 节点。
    添加子节点时,流式布局 (Flow Layout) 节点会沿主要方向 (Primary Direction)次要方向 (Secondary Direction) 属性所定义的轴放置这些子节点。
  3. (可选) 要清除布局中子节点周围的区域,在工程 (Project) 中选择布局中的子节点,在属性 (Properties) 中点击 ,然后添加并设置边距属性:

设置流式布局 (Flow Layout) 节点的方向

对于流式布局 (Flow Layout) 节点,您可以设置流式布局 (Flow Layout) 节点用于排列其子节点的起点和方向。

要设置流式布局 (Flow Layout) 节点的方向:

  1. 创建一个流式布局 (Flow Layout) 节点并为其添加子节点。请参阅创建 流式布局 (Flow Layout) 节点
  2. 属性 (Properties) 中,设置流式布局 (Flow Layout) 节点方向属性:

    例如,要根据以下语言中使用的规则安排流式布局中的项:

设置 2D 流式布局 (Flow Layout 2D) 节点的外观

要设置 2D 节点的外观:

在 API 中使用 3D 流式布局 (Flow Layout 3D) 节点

要创建 3D 流式布局对象:

//创建一个名为 Flow 的 3D 流式布局对象。默认的主方向是
//从左向右,次方向是从上到下。
FlowLayout3DSharedPtr flow = FlowLayout3D::create(domain, "Flow");

要设置流式布局的宽度:

//将流式布局的宽度设置为 6 个设备无关像素以
//限制其在主方向的大小。通过限制流式布局在主方向的大小,
//可以强制流式布局在无法将某个项放到主方向时
//在次方向创建一个新行。
flow->setWidth(6.0f);

要将项添加到流式布局:

//3D 流式布局按照您添加项时所用的顺序排列这些项。
//创建 3D 对象...
Model3DSharedPtr item1 = Model3D::createBox(domain, "item1", Vector3(2.0f, 1.0f, 1.0f), ThemeRed);
// ... 并将其添加到流式布局中。
flow->addChild(item1);
//第二个项仍然放到第一行中。
Model3DSharedPtr item2 = Model3D::createBox(domain, "item2", Vector3(3.0f, 1.0f, 1.0f), ThemeGreen);
flow->addChild(item2);
//第一行中仍有空间,但第三个项
//太大放不下,因此流式布局创建了一个新行。
Model3DSharedPtr item3 = Model3D::createBox(domain, "item3", Vector3(5.0f, 1.0f, 1.0f), ThemeBlue);
flow->addChild(item3);
//第四个项放到第二行中且未留下任何空白空间。
Model3DSharedPtr item4 = Model3D::createBox(domain, "item4", Vector3(1.0f, 1.0f, 1.0f), ThemeOrange);
flow->addChild(item4);
//流式布局将最后一个项放到一个新行中。
Model3DSharedPtr item5 = Model3D::createBox(domain, "item5", Vector3(3.0f, 1.0f, 1.0f), ThemeGreen);
flow->addChild(item5);

有关详细信息,请参阅 API reference中的 FlowLayout3D 类。

在 API 中使用 2D 流式布局 (Flow Layout 2D) 节点

要创建 3D 流式布局对象:

//创建一个名为 Flow 的 2D 流式布局对象。默认的主方向是
//从左向右,次方向是从上到下。
FlowLayout2DSharedPtr flow = FlowLayout2D::create(domain, "Flow");

要设置流式布局的宽度:

//将流式布局的宽度设置为 600 像素,以限制流式布局在
//主方向的大小。通过限制流式布局在主方向的大小,可以强制
//流式布局在无法将某个项放到主方向时
//在次方向创建一个新行。
flow->setWidth(600.0f);

要将项添加到流式布局:

//2D 流式布局按照您添加项时所用的顺序排列这些项。
//创建 2D 对象...
EmptyNode2DSharedPtr item1 = EmptyNode2D::create(domain, "item1", 200.0f, 200.0f, ThemeRed);
// ... 并将其添加到流式布局中。
flow->addChild(item1);
//第二个项仍然放到第一行中。
EmptyNode2DSharedPtr item2 = EmptyNode2D::create(domain, "item2", 250.0f, 250.0f, ThemeBlue);
flow->addChild(item2);
//第一行中仍有空间,但第三个项
//太大放不下,因此流式布局创建了一个新行。
EmptyNode2DSharedPtr item3 = EmptyNode2D::create(domain, "item3", 200.0f, 200.0f, ThemeGreen);
flow->addChild(item3);
//第四个项放到第二行中且未留下任何空白空间。
EmptyNode2DSharedPtr item4 = EmptyNode2D::create(domain, "item4", 400.0f, 400.0f, ThemeOrange);
flow->addChild(item4);
//流式布局将最后一个项放到一个新行中。
EmptyNode2DSharedPtr item5 = EmptyNode2D::create(domain, "item5", 150.0f, 150.0f, ThemeRed);
flow->addChild(item5);

有关详细信息,请参阅 API reference中的 FlowLayout2D 类。

流式布局 (Flow Layout) 属性类型和消息

要查看 流式布局 (Flow Layout) 节点可用属性类型和消息的完整列表,请参阅 Flow layout 2DFlow layout 3D

另请参阅

使用停靠布局 (Dock Layout) 节点

使用网格布局 (Grid Layout) 节点

使用堆栈布局 (Stack Layout) 节点

使用轨迹布局 (Trajectory Layout) 节点

布局控制节点

使用 Kanzi Studio 为节点启用点击手势